<template>
	<view
		class="distributionSubTabs"
		:class="{ skelett: isSkelett }"
		:style="[
			fixedStyle,
			{
				height: height
			}
		]"
	>
		<view class="distributionSubTabs-main">
			<view
				class="distributionSubTabs-main-item"
				:key="item.type"
				v-for="(item, index) in list"
				@click="changeIndex(item, index)"
				:class="{ active: index === currentSelectIndex }"
			>
				<view>
					<text>{{ item.label }}</text>

					<text v-if="item.subLabel" class="sub-title">{{ item.subLabel }}</text>
				</view>
			</view>
		</view>

		<view class="distributionSubTabs-active">
			<image :src="activeIcon" :style="[tabLineStyle]" v-show="isTabLine" />
		</view>
	</view>
</template>

<script>
import { isNil } from 'lodash';
import { getDomeInfo } from '@/utils/common';

const activeIcon = Object.freeze(require('@/static/icon/icon_sub_tabs_active.png'));

export default {
	name: 'distributionSubTabs',

	props: {
		value: {
			type: [String, Number, undefined, null],
			default: undefined
		},

		iconWidth: {
			type: Number,
			default: uni.upx2px(44)
		},

		isSkelett: {
			type: Boolean,
			default: false
		},

		list: {
			type: Array,
			default: () => {
				return [];
			}
		},

		fixedTop: {
			type: Number,
			default: 0
		},

		isFiexd: {
			type: Boolean,
			default: false
		},

		width: {
			type: Number,
			default: 0
		},

		height: {
			type: [Number, String],
			default: 'auto'
		}
	},

	data() {
		return {
			activeIcon,

			mainTop: 0,
			scrollTop: 0,
			itemWidth: 0,
			subscriptIndex: 0,
			isFirstRender: false
		};
	},

	mounted() {
		this.getMainLableDomeInfo();
	},

	computed: {
		isTabLine() {
			const { list, isFirstRender, isSkelett } = this;

			return !isSkelett && isFirstRender && list?.length > 1;
		},
		currentSelectIndex() {
			const { value, list, subscriptIndex } = this;

			if (isNil(value)) {
				return subscriptIndex;
			}

			return list.findIndex((item) => item?.type === value);
		},

		tabLineStyle() {
			const { currentSelectIndex, itemWidth, iconWidth } = this;

			const tabBarPosition = currentSelectIndex * itemWidth + itemWidth / 2 - iconWidth / 2;

			const style = {
				width: `${iconWidth}px`,
				transition: 'transform 0.3s',
				transform: `translate3d(${tabBarPosition}px, 0, 0)`
			};

			return style;
		},

		fixedStyle() {
			const { isFiexd, scrollTop, mainTop, fixedTop } = this;

			if (!isFiexd && (!mainTop || mainTop - scrollTop - fixedTop > 0)) {
				return {};
			}

			return {
				position: 'fixed',
				left: 0,
				right: 0,
				zIndex: 9999,
				top: `${fixedTop}px`,
				background: '#fff'
			};
		}
	},

	methods: {
		changeIndex(params, index) {
			const { value, isSkelett, currentSelectIndex } = this;

			if (index === currentSelectIndex || isSkelett) {
				return;
			}

			this.$emit('beforeCallBack', params);

			value ? this.$emit('input', params?.type) : (this.subscriptIndex = index);

			this.$nextTick((e) => {
				this.$emit('afterCallBack', params);
			});
		},

		changePageScroll(scrollTop) {
			this.scrollTop = scrollTop;
		},

		getMainLableDomeInfo() {
			getDomeInfo.call(this, '.distributionSubTabs', false).then((res) => {
				const { top, width } = res;

				this.mainTop = top;
				this.itemWidth = (this.width || width) / this.list.length;

				this.$nextTick((e) => {
					this.isFirstRender = true;
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.distributionSubTabs {
	&-main {
		display: flex;
		padding: 28rpx 0 16rpx;
		transform: translateZ(0);

		&-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;

			height: 100%;
			color: #666;
			font-size: 32rpx;

			&.active {
				color: #333;
				font-weight: bold;
			}

			view {
				position: relative;
			}

			.sub-title {
				position: absolute;
				left: 64rpx;
				top: 50%;
				transform: translateY(-50%);

				width: 80rpx;
				color: #999;
				font-size: 22rpx;
				font-weight: 400;
			}
		}
	}

	&-active {
		position: relative;
		margin-top: -10rpx;

		image {
			position: absolute;
			top: 0;
			left: 0;
			height: 10rpx;
		}
	}

	&.skelett {
		.distributionSubTabs-main-item {
			margin: 0 20rpx;
			border-radius: 12rpx;
			background: $skelettBgColor;

			text {
				visibility: hidden;
			}
		}
	}
}
</style>
